// 获取操作对象
var ttbs = document.querySelectorAll('.t-tb');
var lists = document.querySelectorAll('.typlist');
var uls = document.querySelectorAll('.t-ty ul');
// console.log(uls[0]);


(async function(){
    // 获取所有数据
    var txt = await PromiseAjax({
        url:"./php/index2.php",
    })
    // console.log(txt);
    // 把字符串转为数组对象
    var ar1= eval('('+txt+')')
    var br1 = ar1.slice(0,6);
    var br2 = ar1.slice(6,12);
    var br3 = ar1.slice(12,18);
    var br4 = ar1.slice(18,24);
    // console.log(br1,br2,br3,br4);
    // 创建字符串，拼接所有内容
    var str = ''
    // 遍历数组元素
    br1.forEach( item=> {
        str+= `
            <li>
                <div class="timg">
                    <a href="./details.html?id=${item.id}">
                        <img src="${item.img}" alt="">
                    </a>
                </div>
                <div class="ctmc">
                    <p class="p1">
                        <a href="javascript:;">${item.title}</a>
                    </p>
                    <p class="p2">
                        <a href="javascript:;">
                            <i class="iconfont icon-ziying ie"></i>
                        </a>
                    </p>
                    <p class="p3">
                        <span><span class="pri">￥</span>${item.price}</span>
                    </p>
                </div>
            </li>
        `
    })
    uls[0].innerHTML=str

    var str2 = ''
    br2.forEach( item=> {
        str2+= `
            <li>
                <div class="timg">
                    <a href="./details.html?id=${item.id}">
                        <img src="${item.img}" alt="">
                    </a>
                </div>
                <div class="ctmc">
                    <p class="p1">
                        <a href="javascript:;">${item.title}</a>
                    </p>
                    <p class="p2">
                        <a href="javascript:;">
                            <i class="iconfont icon-ziying ie"></i>
                        </a>
                    </p>
                    <p class="p3">
                        <span><span class="pri">￥</span>${item.price}</span>
                    </p>
                </div>
            </li>
        `
    })
    uls[1].innerHTML=str2

    var str3 = ''
    br3.forEach( item=> {
        str3+= `
            <li>
                <div class="timg">
                    <a href="./details.html?id=${item.id}">
                        <img src="${item.img}" alt="">
                    </a>
                </div>
                <div class="ctmc">
                    <p class="p1">
                        <a href="javascript:;">${item.title}</a>
                    </p>
                    <p class="p2">
                        <a href="javascript:;">
                            <i class="iconfont icon-ziying ie"></i>
                        </a>
                    </p>
                    <p class="p3">
                        <span><span class="pri">￥</span>${item.price}</span>
                    </p>
                </div>
            </li>
        `
    })
    uls[2].innerHTML=str3

    var str4 = ''
    br4.forEach( item=> {
        str4+= `
            <li>
                <div class="timg">
                    <a href="./details.html?id=${item.id}">
                        <img src="${item.img}" alt="">
                    </a>
                </div>
                <div class="ctmc">
                    <p class="p1">
                        <a href="javascript:;">${item.title}</a>
                    </p>
                    <p class="p2">
                        <a href="javascript:;">
                            <i class="iconfont icon-ziying ie"></i>
                        </a>
                    </p>
                    <p class="p3">
                        <span><span class="pri">￥</span>${item.price}</span>
                    </p>
                </div>
            </li>
        `
    })
    uls[3].innerHTML=str4
})()